{extend name="Base/base"/}
{block name="body"}
<!-- 标题 -->
    <div class="main-title">
        <h2>
            商城幻灯片
        </h2>
    </div>

    <div style="margin-bottom: 10px;" class="hide" id="search_form">

        <style>
            .tb_search td{
                padding: 5px 10px;
            }
        </style>
        <div style="border-top:1px solid #ccc;border-bottom: 1px solid white"></div>
    </div>
    <!-- 按钮工具栏 -->
    <div class="with-padding">
        <div class="fl">

            <a href="{:url('',['action'=>'add'])}" class="btn btn-ajax btn-success btn">新增</a>&nbsp;
            <button class="btn ajax-post btn" url="{:url('',['action'=>'delete'])}" target-form="ids">删除</button>&nbsp;

            <!-- 选择框select -->
            <div style="float: right;">
                <style>
                    .oneselect{
                        display: inline-block;
                        margin-left: 10px;
                    }
                    .oneselect .title{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box{
                        float: left;
                        line-height: 32px;
                    }
                    .oneselect .select_box select{
                        min-width: 200px;
                    }
                </style>
                <form id="selectForm" method="get" action="/uctoo/index.php?s=/admin/shop/slides.html" class="form-dont-clear-url-param">
                </form>
            </div>
        </div>

    </div>


    <!-- 数据表格 -->
    <div class="with-padding" stype="width:auto; overflow: auto;">
        <table id="table-data" class="table table-bordered table-striped table-hover">
            <!-- 表头 -->
            <thead>
            <tr>
                <th class="row-selected row-selected" style="width: 20px">
                    <input class="check-all" type="checkbox">
                </th>
                <th>ID</th><th>图片</th><th>说明</th><th>链接</th><th>排序</th><th>状态</th><th>创建时间</th><th>操作</th>            </tr>
            </thead>

            <!-- 列表 -->
            <tbody>
            {foreach name="list" item="list"}
            <tr>
                <td><input class="ids" type="checkbox" value="{$list.id}" name="ids"></td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$list.id}</td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">
                    <div class="popup-gallery">
                        <img src="{$list.image}" style="width:200px; ">
                    </div>
                </td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$list.title}</td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$list.link}</td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$list.sort}</td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{if condition="$list.status == 0"}启用{else/}禁用{/if}</td>
                <td style="width:auto;max-width: 150px;" class="text-ellipsis">{$list.create_time}</td>
                <td style="width:auto;max-width: 150px;"
                    class="text-ellipsis"><a href="{:url('',array('action'=>'add','id'=>$list['id']))}">编辑</a></td>


            </tr>
            {/foreach}
        </table>
    </div>
    <!-- 分页 -->
    <div class="with-padding">
        <div class="pager">
           {$page}
        </div>
    </div>
</div>
{/block}

{block name="script"}
    <script type="text/javascript">
        $('.form-datetime').datetimepicker({
            language: "zh-CN",
            autoclose: true,
            format: 'yyyy-mm-dd hh:ii'
        });
        $('.form-date').datetimepicker({
            language: "zh-CN",
            minView: 2,
            autoclose: true,
            format: 'yyyy-mm-dd'
        });
        $('.form-time').datetimepicker({
            language: "zh-CN",
            minView: 0,
            startView:1,
            autoclose: true,
            format: 'hh:ii'
        });
        $('.time').change(function () {
            var fieldName = $(this).attr('data-field-name');
            var dateString = $(this).val();
            var date = new Date(dateString);
            var timestamp = date.getTime();
            $('[name=' + fieldName + ']').val(Math.floor(timestamp / 1000));
        });

        $(function () {
            //搜索功能
            $("#search").click(function () {
                var url = $(this).attr('url');
                var query = $('.search-form').find('input').serialize();
                query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
                query = query.replace(/^&/g, '');
                if (url.indexOf('?') > 0) {
                    url += '&' + query;
                } else {
                    url += '?' + query;
                }
                window.location.href = url;
            });
            //回车搜索
            $(".search-input").keyup(function (e) {
                if (e.keyCode === 13) {
                    $("#search").click();
                    return false;
                }
            });
            //导航高亮

            //点击排序
            $('.list_sort').click(function () {
                var url = $(this).attr('url');
                var ids = $('.ids:checked');
                var param = '';
                if (ids.length > 0) {
                    var str = new Array();
                    ids.each(function () {
                        str.push($(this).val());
                    });
                    param = str.join(',');
                }

                if (url != undefined && url != '') {
                    window.location.href = url + '/ids/' + param;
                }
            });
        });
    </script>
{/block}